<script setup lang="ts">
import { useOrderStore } from '@/stores/order';
import EmptyPage from '@/views/tabs/order/components/EmptyPage.vue';

// import OrderItem from '@/views/tabs/order/components/OrderItem.vue'

const store = useOrderStore()
const isEmpty = store.orderList.length
</script>

<template>
  <div v-if="isEmpty" class="order-list">
    <div class="order-item" v-for="order in store.orderList" :key="order.id">
      <div class="top">
        <img class="shop-img" :src="order.shopImgUrl"/>
        <div class="shop-name">
          <div class="shop-name__detail">
            <span>{{ order.shopName + order.shopBranch }}</span>
            <van-icon name="arrow" color="gray"/>
          </div>
          <div class="shop-name__tip">接受预定中</div>
        </div>
        <div class="delivery-status">已送达</div>
      </div>
      <div class="middle">
        <div class="order-detail">
          <div v-if="order.orderCount > 1" class="order-detail__imgs">
            <div class="order-detail__img" v-for="v in order.goods" :key="v.id">
              <img :src="v.imgUrl">
            </div>
          </div>
          <div v-else class="order-detail__imgs1">
            <div class="order-detail__img" v-for="v in order.goods" :key="v.id">
              <img :src="v.imgUrl">
              <div class="good-name">{{ v.name }}</div>
            </div>
          </div>
          <div class="order-detail__total">
            <div class="price">￥{{ order.totalPrice }}</div>
            <div class="count">共{{ order.orderCount }}件</div>
          </div>
        </div>
        <div class="order-time">{{ order.orderTime }}</div>
      </div>
      <div class="bottom">
        <!-- <div class="evaluate">评价</div> -->
        <div class="one-more">再来一单</div>
        <div class="evaluate">评价</div>
      </div>
    </div>
    <!-- <OrderItem></OrderItem> -->
  </div>
  <EmptyPage v-else :data="'暂无订单,快去下单吧！'"></EmptyPage>
</template>

<style lang="scss" scoped>
.order-list {
  padding: 8px 10px;
  height: 100%;

  .order-item {
    background: white;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    font-size: 12px;
    text-align: left;

    .top {
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .shop-img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }

      .shop-name {
        width: 160px;
        margin-left: 6px;

        &__detail {
          white-space: nowrap; /* 强制不换行 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 超出部分显示省略号 */
          display: flex;
          align-items: center;

          // 让文本部分可以收缩以适应容器
          span {
            flex-shrink: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 18px;
            font-weight: bold;
          }
        }

        &__tip {
          font-family: Arial, sans-serif;
          margin-top: 2px;
          padding: 2px 6px;
          width: 65px;
          border-radius: 5px;
          background: rgb(0, 199, 171);
          font-size: 12px;
          color: white;
          letter-spacing: 1px;
        }
      }
      .delivery-status {
        color: gray;
        margin-left: auto; // 这会让 delivery-status 靠到最右边
      }
    }

    .middle {
      margin-top: 10px;
      .order-detail{
        display: flex;
        justify-content: space-between;
        align-items: center;

        &__imgs {
          // 增加宽度以显示更多图片
          width: auto;
          height: 80px;
          overflow: hidden; // 确保图片超出部分可见
         .order-detail__img{
            display: inline-block; // 修改为 inline-block 布局
            margin-right: 5px;
            img {
              width: 80px;
              border-radius: 10px;
            }
          }
        }

        &__imgs1 {
          width: 290px;
          height: 80px;
          overflow: hidden;
          .order-detail__img{
            display: flex;
            align-items: center;
            img {
              margin-right: 5px;
              width: 80px;
              border-radius: 10px;
              vertical-align: middle;
            }

            .good-name {
              width: 200px;
              height: 80px;
              font-size: 12px;
              font-weight: 500;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              display: flex;
              align-items: center;
              line-height: 1.5;
            }
          }
        }

        &__total {
          position: relative;
          .price {
            font-size: 16px;
            font-weight: bold;
          }

          .count {
            float: right;
            color: gray;
          }
        }
      }

      .order-time {
        color: gray;
      }
    }

    .bottom {
      position: relative;
      margin-top: 10px;
      align-items: center;
      height: 40px;
      line-height: 45px;

      .evaluate,
      .one-more {
        float: right;
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid;
        border-radius: 19px;
      }

      .evaluate {
        border-color: gray;
        color: gray;
      }

      .one-more {
        margin-left: 10px;
        border-color: var(--op-primary-color);
        color: var(--op-primary-color);
      }
    }
  }
}

</style>
